<template>
  <div v-loading="loading" class="process-setting">
    <div style="display:flex;align-items:center;">
      <Title :title="title" @dblclick.native="fillProcess" />
      <quoteProcess :process-list="processList" @handleQuote="handleQuote" @handleChange="handleChange" />
    </div>
    <div class="process-top">
      <div class="content">
        <span class="el-icon-time icon"/>
        <span>激活时间：</span>
        <span class="time">{{ paramsObj.activationTime | format('YYYY/MM/DD HH:mm:ss') }}</span>
        <span class="tip-text">保存新流程不会影响历史审批流程</span>
      </div>
      <div>
        <span style="font-size: 14px; color: #999">缩放百分比：</span>
        <el-input-number v-model="zoomVal" :step="10" :min="50" :max="200" step-strictly size="small" />
      </div>
    </div>
    <div v-scroll id="scroll" class="scroll">
      <div :style="{justifyContent: zoomVal === 100 ? 'flex-start' : 'center'}" class="process-main">
        <NodeWrap v-model="processTree" :style="{ transform: `scale(${zoomVal / 100})` }" class="process-main-container" >
          <div class="process-item-container move-disabled">
            <div>
              <div class="role-tag">抄送人选择</div>
              <select-custom-user v-model="paramsObj.senderDiyUserList" :diy-user-item-list.sync="paramsObj.senderDiyUserItemList" />
            </div>
          </div>
        </NodeWrap>
      </div>
    </div>
    <ApproverDrawer
      ref="ApproverDrawerRef"
      :type="paramsObj.type"
      :process-list="processTree"
      :event-names="eventNames"
      :user-select-fields="allUserSelectFields"
      :is-fixed="isFixed"
      :fixed-id="fixedId"
      :custom-form-list="customFormList" />
    <CopyerDrawer :type="paramsObj.type" />
    <ConditionDrawer
      ref="conditionDrawerRef"
      :type="paramsObj.type"
      :is-fixed="isFixed"
      :custom-form-list="customFormList"/>
    <FlyNoticeDrawer />
  </div>
</template>

<script>
// components
import Title from '@/components/Title';
import ApproverDrawer from '../components/ApproverDrawer';
import CopyerDrawer from '../components/copyerDrawer';
import ConditionDrawer from '../components/ConditionDrawer';
import FlyNoticeDrawer from '../components/FlyNoticeDrawer';
import selectCustomUser from './selectCustomUser';
import quoteProcess from './quoteProcess';
import PerfectScrollbar from 'perfect-scrollbar';

// api editProcess
// api
// import { getProcessDetail, editProcess, addProcess } from '@/api/legal';
// filter
import { EventBus } from '@/utils/eventBus';
import { format } from '@/filters/date';
import ElMessage from '@/utils/message';
import { generateUUID } from '@/utils/tools';
import { ROLE_TYPE } from '@/utils/const/process';

// 获取dom节点的所有父节点
function classInDomPath(node, className) {
  const dfs = (curNode) => {
    if (!curNode || !curNode.parentNode || curNode.nodeName.toUpperCase() === 'BODY') return false;
    if (curNode.className && curNode.className.indexOf(className) >= 0) return true;
    return dfs(curNode.parentNode);
  };
  return dfs(node);
}
export default {
  components: {
    Title, ApproverDrawer, CopyerDrawer, ConditionDrawer,
    selectCustomUser, quoteProcess, FlyNoticeDrawer
  },
  filters: { format },
  provide() {
    return {
      // 流程类型，详情见 @/utils/const/process 的 FIXED_PROCESS_TYPE
      processType: () => this.paramsObj.type
    };
  },
  directives: {
    scroll: {
      bind: function(el) {
        // 拖拽页面逻辑
        el.style['cursor'] = 'grab';
        el.onmousedown = function(e) {
          // 判断class ".move-disabled" 是否在结点 e.target 或其所有父节点中
          // 存在的话就代表这个节点不能拖动
          const hasMoveDisabled = classInDomPath(e.target, 'move-disabled');
          if (hasMoveDisabled) return;
          const disX = e.clientX; // 鼠标点击位置距离浏览器左边的距离
          const disY = e.clientY; // 鼠标点击位置距离浏览器顶部的距离
          const originalScrollLeft = el.scrollLeft; // 当前滚动条的位置：左
          const originalScrollTop = el.scrollTop; // 当前滚动条的位置：上
          const originalPointerEvents = el.style['pointer-events'];
          el.style['cursor'] = 'grabbing';
          // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
          document.onmousemove = function(event) {
            event.preventDefault();
            // 计算拖拽的偏移距离
            const distanceX = event.clientX - disX;
            const distanceY = event.clientY - disY;
            /**
             * disX, disY是点击的时候就固定的，event.clientX, event.clientY会根据鼠标拖拽移动而变化
             * 所以，计算滚动条的位置变化数据，只需要 event.clientX - disX 和 event.clientY - disY
             * 计算滚动条最终位置 = 原来的位置 - 变化的数据
             */
            el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY);
            // 在鼠标拖动的时候将点击事件屏蔽掉
            el.style['pointer-events'] = 'none';
            document.body.style['cursor'] = 'grabbing';
          };
          document.onmouseup = function() {
            // 解绑事件和手势恢复
            document.onmousemove = null;
            document.onmouseup = null;
            el.style['pointer-events'] = originalPointerEvents;
            // el.style['cursor'] = 'auto';
            el.style['cursor'] = 'grab';
            document.body.style['cursor'] = 'auto';
          };
        };
      },
      // 指令的定义
      inserted: function(el) {
        el.ps = new PerfectScrollbar(el);
      },
      unbind: function(el) {
        el.ps.destroy();
        el.ps = null;
        el.onmousedown = null;
      }
    }
  },
  props: {
    eventNames: {
      type: Array,
      default: () => []
    },
    customFormList: { // 自定义表单设计配置字段
      type: Array,
      default: () => []
    },
    isFixed: { // 是否为固定表单
      type: Boolean,
      default: false
    },
    processList: { // 流程列表
      type: Array,
      default: () => []
    },
    fixedId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      processId: '',
      opeatorLoading: false,
      loading: false,
      title: '管理流程',
      isEdit: false,
      processTree: {
        root: true,
        nodeName: '任务发起',
        // nodeType: 1,
        childNode: {}
      },
      paramsObj: {
        type: -1,
        syncDingTalk: 0,
        process: {},
        senderDiyUserItemList: [],
        senderDiyUserList: []
      },
      zoomVal: 100,
      allUserSelectFields: []
    };
  },
  watch: {
    zoomVal() {
      this.resetScrollDom();
    },
    processTree: {
      handler() {
        this.zoomVal !== 100 && this.resetScrollDom();
        this.$emit('statusCheck');
        EventBus.$emit('processChange', this.processTree);
      },
      deep: true
    },
    paramsObj: {
      handler() {
        this.$emit('statusCheck');
      },
      deep: true
    },
    customFormList: {
      handler(list) {
        this.getAllUserSelectFields(list);
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.processId = Number(this.$route.params.id) || '';
    this.paramsObj.type = Number(this.$route.query.type) || -1;
    this.isEdit = !!this.processId;
    // 事件设置目标节点变更 -> 同步变更节点设置的审批事件，两者对应
    EventBus.$on('eventTargetNodesChange', list => {
      list.forEach(item => {
        this.resetNodeEvents(item);
      });
    });
  },
  methods: {
    resetNodeEvents(data) {
      const dfs = (curNode) => {
        if (!curNode || this.isEmpty(curNode)) return;
        // 排除开始结束节点
        if (!curNode.root && !curNode.isEnd) {
          // 审批-0 || 加签-5 节点
          if ([0, 5].includes(curNode.nodeType)) {
            const eventId = data.id || -Number(data.orderPrivateId);
            if (data.targetNodes.includes(curNode.id)) {
              if (!(curNode.setEvents || []).includes(eventId)) {
                curNode.setEvents.push(eventId);
              }
            } else {
              curNode.setEvents = (curNode.setEvents || []).filter(i => i !== eventId);
            }
          }
        }
        if (!this.isEmpty(curNode.childNode)) {
          dfs(curNode.childNode);
        }
        if (curNode.conditionNodes && curNode.conditionNodes.length) {
          for (let i = 0; i < curNode.conditionNodes.length; i++) {
            dfs(curNode.conditionNodes[i]);
          }
        }
      };
      dfs(this.processTree);
    },
    resetScrollDom() {
      // scale缩放不会改变实际的dom，需要计算后重新给滚动区域设置宽高
      this.$nextTick(() => {
        const minWidth = document.body.clientWidth - 32;

        const mainContainerDom = document.querySelector('.process-main-container');
        const nodeWrapDom = mainContainerDom.querySelector('.node-wrap');
        const endNodeDom = mainContainerDom.querySelector('.end-node');
        const containerDom = mainContainerDom.querySelector('.container');
        const processItemContainerDom = mainContainerDom.querySelector('.process-item-container');

        const { width, height } = mainContainerDom.getClientRects()[0];
        const clientHeight = (nodeWrapDom && nodeWrapDom.clientHeight) + (endNodeDom && endNodeDom.clientHeight) +
          (containerDom && containerDom.clientHeight) + (processItemContainerDom && processItemContainerDom.clientHeight);

        const scrollDom = document.querySelector('.process-main');
        scrollDom.style.width = Math.max(width, minWidth) + 'px';
        scrollDom.style.height = (height > clientHeight ? (height - clientHeight) : height) + 'px';
      });
    },
    // 获取所有自定义表单的人员选择字段
    getAllUserSelectFields(list) {
      const result = [];
      if (Array.isArray(list) && list.length) {
        list.forEach(field => {
          if (field.type === 'user') {
            result.push(field);
          } else if (field.type === 'grid') {
            field.columns.forEach(column => {
              column.list.forEach(item => {
                item.type === 'user' && result.push(item);
              });
            });
          }
        });
      }
      this.allUserSelectFields = result;
    },
    /** 外部接口，自定义审批时候用 */
    setDefaultData(data, setUserData = 0) { // 提供给父组件设置数据
      const cloneData = _.cloneDeep(data);
      this.setData(cloneData, setUserData);
      // 编辑时初始化对流程设计的条件赋值
      this.$nextTick(() => {
        this.$refs['conditionDrawerRef'].setKeywordOptions();
      });
    },
    handleChange() {
      this.$emit('statusCheck');
    },
    getDetailData(isAlert = true, isValidate = true) { // 提供给父组件获取数据
      const paramsObj = JSON.parse(JSON.stringify(this.paramsObj));
      const process = JSON.parse(JSON.stringify(this.processTree));
      paramsObj.process = process;
      const errorList = this.validate(process, paramsObj.type);
      if (isValidate && errorList && errorList.length) {
        if (isAlert) {
          ElMessage.error(errorList[0]);
        }
        return null;
      }
      this.handelParams(process, 1);
      if (isValidate) {
        this.addEndNode(process);
      }
      this.addLockAttr(paramsObj.senderDiyUserItemList);
      paramsObj.type = paramsObj.type === -1 ? 12 : paramsObj.type;
      paramsObj.process.nodeType = 0;
      delete paramsObj.processSettingTemplate;
      return paramsObj;
    },
    // 提供给父组件，设置页面居中，防止条件太长
    setMiddle() {
      this.$nextTick(() => {
        // 居中
        const scrollContainer = document.getElementById('scroll');
        const scrollLeft = scrollContainer.querySelector('.process-main-container').clientWidth / 2;
        if (scrollLeft - 758 > 0) {
          scrollContainer.scrollTo(scrollLeft - 758, 0);
        }
      });
    },
    setData(data, setUserData = 0) {
      if (data.process && Array.isArray(data.process)) {
        this.processTree.childNode = this.arrToTree(data.process);
      } else if (data.processSettingTemplate && Array.isArray(data.processSettingTemplate)) {
        this.processTree.childNode = this.arrToTree(data.processSettingTemplate);
      } else if (data.processSettingTemplate) {
        if (data.processSettingTemplate.root) {
          this.processTree = data.processSettingTemplate;
        } else {
          this.processTree.childNode = data.processSettingTemplate;
        }
      }
      this.title = data.name || '编辑流程';
      this.paramsObj = data;
      // let senderDiyUserItemList;
      const userKey = setUserData ? 'senderDiyUserItemList' : 'senderDiyUserList';
      const senderDiyUserItemList = this.paramsObj[userKey] ? this.paramsObj[userKey] : [];
      const senderDiyUserList = this.paramsObj[userKey] ? this.paramsObj[userKey].map(k => k.id) : [];
      // const senderDiyUserItemList = this.paramsObj.senderDiyUserList ? this.paramsObj.senderDiyUserList : [];
      // const senderDiyUserList = this.paramsObj.senderDiyUserList ? this.paramsObj.senderDiyUserList.map(k => k.id) : [];
      this.$set(this.paramsObj, 'senderDiyUserItemList', senderDiyUserItemList);
      this.$set(this.paramsObj, 'senderDiyUserList', senderDiyUserList);
      this.handelParams(this.processTree);
    },
    addLockAttr(data) {
      data.map(item => {
        item.lock = true;
      });
    },
    arrToTree(arr) {
      arr = JSON.parse(JSON.stringify(arr));
      if (!arr || arr.length <= 0) return {};
      arr[0].nodeName = arr[0].examineRoles[0].roleName;
      arr[0].nodeType = 0;
      const root = arr[0];
      let cur = root;
      for (let i = 1; i < arr.length; i++) {
        arr[i].nodeName = arr[i].examineRoles[0].roleName;
        arr[i].nodeType = 0;
        cur.childNode = arr[i];
        cur = cur.childNode;
      }
      return root;
    },
    /**
     * type 0: 初始 1:提交
     * quoteEvent 如果有这个参数，则表明是引用的数据，需要处理不存在事件
     */
    handelParams(tree, type = 0, isCondition = false, quoteEvent = null) {
      if (!tree || this.isEmpty(tree)) return;
      // 审批超时任务相关字段
      if (this.isEmpty(tree.childNode)) tree.childNode = null;
      if (type === 0) {
        if (tree.nodeType === 3 && !tree.examineRoles) {
          this.$set(tree, 'examineRoles', []);
        }
        if (tree.nodeType === 0 && !tree.submitBtnList) {
          this.$set(tree, 'submitBtnList', []);
        }
        if (tree.nodeType === 1) {
          this.$set(tree, '_id', generateUUID());
        }
        this.$set(tree, 'transferDiyUserIdList', tree.transferDiyUserIdList || []);
        this.$set(tree, 'transferDiyUserList', tree.transferDiyUserList || []);
        if (tree.transferRoleType !== 2) {
          this.$set(tree, 'transferDiyUserIdList', []);
          this.$set(tree, 'transferDiyUserList', []);
        }
      } else {
        // transferRoleType 0:任务创建人 1:选择部门 2:自定义人员 3:不限制审批人
        tree.transferDiyUserList = tree.transferDiyUserList || [];
        if (tree.transferRoleType !== 1) tree.transferDepartmentIdList = [];
        if (tree.transferRoleType !== 2) {
          tree.transferDiyUserList = [];
          tree.transferDiyUserIdList = [];
        }
        // 节点类型 0: 审批人节点  1: 条件分支  2: 条件子节点  3:抄送节点
        if (tree.examineRoles) {
          tree.examineRoles.forEach(i => {
            if (i.roleType !== ROLE_TYPE.CUSTOMIZE) {
              i.diyUserList = [];
              i.diyUserIdList = [];
            }
            if (i.roleType !== ROLE_TYPE.DEPARTMENT) {
              i.departmentList = [];
              i.departmentIdList = [];
            }
            if (tree.nodeType === ROLE_TYPE.UNLIMITED)i.isAutoFill = 1;
          });
        }
        if (tree.submitBtnList) {
          tree.submitBtnList.forEach(i => {
            if (i.roleType !== ROLE_TYPE.CUSTOMIZE) {
              i.diyUserList = [];
              i.diyUserIdList = [];
            }
            if (i.roleType !== ROLE_TYPE.DEPARTMENT) {
              i.departmentList = [];
              i.departmentIdList = [];
            }
          });
        }
      }
      // 引用逻辑
      if (quoteEvent) {
        if (tree.setEvents && tree.setEvents.length) {
          tree.setEvents = tree.setEvents.filter(i => {
            return quoteEvent.some(j => j.id === i);
          });
        }
        // if (tree.nodeType === 1 && tree.conditionNodes && tree.conditionNodes.length) {
        //   tree.conditionNodes.forEach(i => {
        //     this.$set(i.conditionList, 'list', []);
        //   });
        // }
      }
      if (tree.examineRoles && tree.examineRoles.length) {
        tree.examineRoles.forEach(j => {
          // roleType 0:任务创建人 1:选择部门 2:自定义人员 3:不限制审批人 4: 申请人 5: 主管
          if (j.roleType === ROLE_TYPE.UNLIMITED) {
            j.allowSelectOther = 0;
          }
          if (type === 0) {
            // 部门
            this.$set(j, 'departmentList', j.departmentList || []);
            this.$set(j, 'departmentIdList', j.departmentList ? j.departmentList.map(k => k.id) : []);
            // 自定义用户
            this.$set(j, 'diyUserList', j.diyUserList || []);
            this.$set(j, 'diyUserIdList', j.diyUserList ? j.diyUserList.map(k => k.id) : []);
          } else {
            // roleType 0:任务创建人 1:选择部门 2:自定义人员 3:不限制审批人 4: 申请人 5: 主管
            if (j.roleType !== ROLE_TYPE.DEPARTMENT) {
              j.departmentList = [];
              j.departmentIdList = [];
            }
            if (j.roleType !== ROLE_TYPE.CUSTOMIZE) {
              j.diyUserList = [];
              j.diyUserIdList = [];
            }
          }
        });
      }
      // 如果是固定表单引用自定义表单，需要把表单校验前置条件清空
      if (this.isFixed) {
        tree.hasOwnProperty('frontFilterList') && delete tree.frontFilterList;
        tree.hasOwnProperty('frontRole') && delete tree.frontRole;
      }
      if (!this.isEmpty(tree.childNode)) {
        this.handelParams(tree.childNode, type, isCondition, quoteEvent);
      } else if (!isCondition && type === 1) {
        tree.childNode = null;
      }
      if (tree.conditionNodes && tree.conditionNodes.length) {
        for (let i = 0; i < tree.conditionNodes.length; i++) {
          this.handelParams(tree.conditionNodes[i], type, true, quoteEvent);
        }
      }
    },
    // 验证数据
    validate(tree, type) {
      /**
       * 验证规则
       * 1、除了请款流程(type:3),签约内审(type:13),精力分配(type:12)，其他都需要判断事件 “节点之后生成归档编号（id:3）业务回收合同（id:6）”
       * 2、审批节点必须有设置角色 examineRoles
       * 3、抄送节点必须设置抄送人 examineRoles
       * 4、必须设置节点名称
       */
      const errorList = {
        nodeRoleErr: [],
        nodeSenderErr: [],
        nodeNameErr: ''
      };
      // let event3 = 0;
      // let event6 = 0;
      let hasApprovalNode = false;
      const dfs = (curNode) => {
        if (!curNode || this.isEmpty(curNode)) return;
        // 排除开始结束节点
        if (!curNode.root && !curNode.isEnd) {
          // 审批&加签节点
          if ([0, 5].includes(curNode.nodeType)) {
            hasApprovalNode = true;
            if (!curNode.examineRoles || curNode.examineRoles.length === 0) {
              errorList.nodeRoleErr.push(curNode.nodeName);
            }
          }
          if (curNode.nodeType === 4) {
            if (!curNode.examineRoles || curNode.examineRoles.length === 0 || !curNode.examineRoles[0].roleName) {
              errorList.nodeRoleErr.push(curNode.nodeName);
            }
          }
          if (!curNode.nodeName && curNode.nodeType !== 1) {
            errorList.nodeNameErr = '请输入节点名称';
          }
          // 抄送节点
          if (curNode.nodeType === 3 && (!curNode.examineRoles || curNode.examineRoles.length === 0)) {
            errorList.nodeSenderErr.push(curNode.nodeName);
          }
          // 事件
          // if (curNode.setEvents && curNode.setEvents.length) {
          //   if (curNode.setEvents.includes(3)) event3++;
          //   if (curNode.setEvents.includes(6)) event6++;
          // }
        }
        if (!this.isEmpty(curNode.childNode)) {
          dfs(curNode.childNode);
        }
        if (curNode.conditionNodes && curNode.conditionNodes.length) {
          for (let i = 0; i < curNode.conditionNodes.length; i++) {
            dfs(curNode.conditionNodes[i]);
          }
        }
      };
      dfs(tree);
      const errorRole = `${errorList.nodeRoleErr.length ? errorList.nodeRoleErr.join('、') : ''}`;
      const errorSender = `${errorList.nodeSenderErr.length ? errorList.nodeSenderErr.join('、') : ''}`;
      const arr = [];
      // 去除事件唯一的判断，因为多个条件节点的情况无法判断，只能有用户自己配
      // if (this.processId !== 4 && type !== 3 && type !== 12 && type !== 13) {
      //   if (!event3) arr.push('没有开启归档编号生成事件，无法保存');
      //   if (!event6) arr.push('没有开启业务回收合同，无法保存');
      // }
      !hasApprovalNode && arr.push('请在流程设计中添加审批节点');
      if (errorList.nodeNameErr) arr.push(errorList.nodeNameErr);
      if (errorRole) arr.push(`节点“${errorRole}”没有设置角色，无法保存`);
      if (errorSender) arr.push(`节点“${errorSender}”没有设置抄送人，无法保存`);
      return arr;
    },
    // 引用
    handleQuote(val) {
      let process;
      if (Array.isArray(val.process)) {
        process = this.arrToTree(val.process);
      } else {
        process = val.processSettingTemplate;
      }
      this.$set(this.paramsObj, 'senderDiyUserItemList', val.senderDiyUserList ? val.senderDiyUserList : []);
      this.$set(this.paramsObj, 'senderDiyUserList', val.senderDiyUserList ? val.senderDiyUserList.map(k => k.id) : []);
      this.$nextTick(() => {
        const event = this.$refs.ApproverDrawerRef.eventList;
        // 如果引用的是付款申请，删除其中所有达人审批节点
        if (val.type === 3) {
          const root = { childNode: process };
          this.deleteNodeType4(root, root.childNode);
          process = root.childNode;
        }
        this.handelParams(process, 0, false, event);
        this.processTree.childNode = process;
        this.$forceUpdate();
      });
      this.$nextTick(() => {
        const scrollContainer = document.getElementById('scroll');
        scrollContainer.scrollTo(0, 0);
        this.resetScrollDom();
        this.setMiddle();
      });
    },
    // 删除达人节点
    deleteNodeType4(preNode, curNode) {
      let pre, cur;
      if (curNode.nodeType === 4) {
        const nextNode = curNode.childNode;
        preNode.childNode = nextNode;
        pre = preNode;
        cur = preNode.childNode;
      } else {
        pre = curNode;
        cur = curNode.childNode;
      }
      if (!this.isEmpty(cur) && cur) {
        // 条件节点
        if (cur.nodeType === 1 && cur.conditionNodes) {
          for (let i = 0; i < cur.conditionNodes.length; i++) {
            const root = { childNode: cur.conditionNodes[i] };
            this.deleteNodeType4(root, root.childNode);
            cur.conditionNodes[i] = root.childNode;
          }
        }
        this.deleteNodeType4(pre, cur);
      }
    },
    // 设置弹窗
    openAudit(data) {
      this.$refs.AuditDialogRef.open(data);
    },
    isEmpty(obj) {
      if (!obj) return false;
      return Object.keys(obj).length <= 0;
    },
    addEndNode(node) {
      if (!node || this.isEmpty(node)) return;
      if (node.childNode) {
        this.addEndNode(node.childNode);
      } else if (!node.isEnd) {
        node.childNode = {
          childNode: null,
          nodeType: 0,
          isEnd: true
        };
      }
    },
    fillProcess() {
      let res = window._process;
      if (window._processData) {
        res = {
          code: 200,
          data: window._processData
        };
      }
      if (res && res.data && res.data[0] && res.code === 200) {
        if (res.data[0].process && Array.isArray(res.data[0].process)) {
          this.processTree.childNode = this.arrToTree(res.data[0].process);
        } else if (res.data[0].process) {
          if (res.data[0].process.root) {
            this.processTree = res.data[0].process;
          } else {
            this.processTree.childNode = res.data[0].process;
          }
        } else if (res.data[0].processSettingTemplate) {
          if (res.data[0].processSettingTemplate.root) {
            this.processTree = res.data[0].processSettingTemplate;
          } else {
            this.processTree.childNode = res.data[0].processSettingTemplate;
          }
        }
        this.paramsObj = res.data[0];
        this.paramsObj.senderDiyUserItemList = this.paramsObj.senderDiyUserList ? this.paramsObj.senderDiyUserList : [];
        this.paramsObj.senderDiyUserList = this.paramsObj.senderDiyUserList ? this.paramsObj.senderDiyUserList.map(k => k.id) : [];

        this.$nextTick(() => {
          this.handelParams(this.processTree);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.process-setting {
  margin: 16px 16px 0 !important;
  background-color: #fff;
  padding: 24px 24px 40px 24px;
  min-height: calc(100vh - 64px) !important;
}

.process-top {
  display: flex;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 24px;
  padding-left: 10px;
  justify-content: space-between;
  .content {
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 14px;
    margin-right: 16px;
    line-height: 1.2;
    .time {
      color: #333333;
    }
    .tip-text {
      margin-left: 16px;
    }
    .icon {
      color: #999;
      margin-right: 5px;
      font-size: 16px;
      display: inline-block;
    }
  }
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll {
  position: relative;
  height: calc(100vh - 160px);
  &::v-deep {
    .ps__rail-x,.ps__rail-y {
      z-index: 2000;
    }
  }
}
.process-main {
  display: flex;
}
.process-main-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  transform-origin: center top;
}
.process-item-container {
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  .role-tag {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
  }
}
</style>
